import React from "react";
import {
    Text, TouchableOpacity, View,
    NativeModules, ScrollView, Alert,
} from "react-native";
import Style from "../../common/style"
import Title from "../../learn/component/title";

import DropDownList from "../../learn/component/drop-down-list";
import AsyncStorage from "@react-native-community/async-storage";

import FormTextWidget from "../component/form-text";
import FormRichTextWidget from "../component/form-rich-text";
import FormRadioGroupWidget from "../component/form-radio-group";
import FormCheckBoxGroupWidget from "../component/form-checkbox-group";
import FormDropDownListWidget from "../component/form-drop-down-list";

import {FormItems, CityData} from "./test-data"

export default class HomePage extends React.Component {

    state = {
        inputData: {},

        dropDownTarget: {},
        showDropDownList: false,
    };

    selected(itemId, ids, text) {
        this.state.inputData[itemObj.id] = ids + "," + text;
        this.setState({
            showDropDownList: false,
        });
        AsyncStorage.setItem('learn-drop-list-select-ids', ids);
        AsyncStorage.setItem('learn-drop-list-select-test', text)
    }

    showDropDownList(e, item) {

        NativeModules.UIManager.measure(e.currentTarget, (x, y, width, height, pageX, pageY) => {
            console.log("location", x, y, width, height, pageX, pageY);
            this.setState({
                dropDownTarget: item,
                showDropDownList: true,
                left: pageX,
                top: pageY + height,
                width: width,
            })
        });
    }

    _getFormWidget(item, index) {
        switch (item.type) {
            case 'text':
                return (
                    <FormTextWidget key={index} name={item.name}
                                    placeholder={item.placeholder}
                                    value={this.state.inputData[item.id]}
                                    onChangeText={(text) => {
                                        this._refreshData(item.id, text);
                                    }}
                                    keyboardType={item.keyboardType ? 'numeric' : 'default'}
                    />
                );

            case 'rich_text':
                return (
                    <FormRichTextWidget key={index} name={item.name}
                                        value={this.state.inputData[item.id]}
                                        onChangeText={(text) => {
                                            this._refreshData(item.id, text);
                                        }}
                                        keyboardType={item.keyboardType ? 'numeric' : 'default'}
                    />
                );

            case 'checkbox':
                return (
                    <FormCheckBoxGroupWidget key={index} name={item.name}
                                             options={item.options}
                                             selectedItems={this.state.inputData[item.id]}
                                             onSelectedChange={(items) => {
                                                 this._refreshData(item.id, items);
                                             }}
                    />
                );

            case 'radio':
                return (
                    <FormRadioGroupWidget key={index} name={item.name}
                                          options={item.options}
                                          selectedItem={this.state.inputData[item.id]}
                                          onSelectedChange={(items) => {
                                              this._refreshData(item.id, items);
                                          }}
                    />
                );

            case 'select':
                return (
                    <FormDropDownListWidget key={index}
                                            name={item.name}
                                            value={this.state.inputData[item.id]}
                                            options={CityData}
                                            onSelected={(ids, text) => {
                                                this._refreshData(item.id, ids + "_" + text);
                                            }}
                    />
                )
        }
    }

    _refreshData(key, value) {
        this.state.inputData[key] = value;
        this.setState({
            inputData: this.state.inputData
        })
    }

    render() {
        return (

            <View style={Style.page}>
                {/*<View style={{height: StatusBar.currentHeight,backgroundColor:'black'}}/>*/}
                <Title title={'健康打卡'}/>
                <ScrollView keyboardShouldPersistTaps={'handled'}
                            stickyHeaderIndices={[0]}
                >
                    <View style={{backgroundColor: '#fcefe8', borderRadius: 5, padding: 10}}>
                        <Text style={{color: '#ff800e'}}>如何预防新型冠状病毒感染的肺炎？</Text>
                    </View>
                    {
                        FormItems.map((item, index) => {
                            return this._getFormWidget(item, index)
                        })
                    }
                    <TouchableOpacity style={[Style.button, _style.button]} onPress={() => {
                        let result = this.state.inputData;
                        console.log('learn', "inputData", result);
                        // alert(JSON.stringify(result));
                        Alert.alert('你输入的内容', JSON.stringify(result));
                    }}>
                        <Text style={{color: "#FFFFFF"}}>提交</Text>
                    </TouchableOpacity>

                </ScrollView>
            </View>
        )
    }
}

const _style = {
    button: {
        margin: 20,
        backgroundColor: '#ff800e',
        padding: 10,
        borderRadius: 5,
    }
};
